<template>
  <div class="box">
    <div class="userRecommand">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <!-- 达人分享 -->
        <div class="centerCon" v-for="(infor, index) in information" :key="index">
          <div class="content">
            <div class="left">
              <img :src="infor.img" class="pic" />
            </div>

            <div class="right">
              <p>{{ infor.title }}</p>
              <p class="font1">{{ infor.detail1 }}</p>
              <p class="font">{{ infor.detail2 }}</p>
              <ul>
                <li style="display: flex">
                  <span class="span">
                    <van-image round width="0.2rem" height="0.2rem" :src="infor.headerpic" />
                  </span>
                  <span style="color: gray">{{ infor.userdetail }}</span>
                </li>
                <li>
                  <div class="eye">
                    <span class="iconfont icon-liulan" style="color: gray"></span>
                    <span>{{ infor.lookNum }}</span>
                  </div>
                </li>
                <li>
                  <div>
                    <div>
                      <span class="iconfont icon-ke" style="color: gray"></span>
                      <span>{{ infor.can }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="content">
            <div class="left">
              <img :src="infor.img" class="pic" />
            </div>
            <div class="right">
              <p>{{ infor.title }}</p>
              <p class="font1">{{ infor.detail1 }}</p>
              <p class="font">{{ infor.detail2 }}</p>
              <ul>
                <li style="display: flex">
                  <span class="span">
                    <van-image round width="0.2rem" height="0.2rem" :src="infor.headerpic" />
                  </span>
                  <span style="color: gray">{{ infor.userdetail }}</span>
                </li>
                <li>
                  <div class="eye">
                    <span class="iconfont icon-liulan" style="color: gray"></span>
                    <span>{{ infor.lookNum }}</span>
                  </div>
                </li>
                <li>
                  <div>
                    <div>
                      <span class="iconfont icon-ke" style="color: gray"></span>
                      <span>{{ infor.can }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
          <div class="content">
            <div class="left">
              <img :src="infor.img" class="pic" />
            </div>
            <div class="right">
              <p>{{ infor.title }}</p>
              <p class="font1">{{ infor.detail1 }}</p>
              <p class="font">{{ infor.detail2 }}</p>
              <ul>
                <li style="display: flex">
                  <span class="span">
                    <van-image round width="0.2rem" height="0.2rem" :src="infor.headerpic" />
                  </span>
                  <span style="color: gray">{{ infor.userdetail }}</span>
                </li>
                <li>
                  <div class="eye">
                    <span class="iconfont icon-liulan" style="color: gray"></span>
                    <span>{{ infor.lookNum }}</span>
                  </div>
                </li>
                <li>
                  <div>
                    <div>
                      <span class="iconfont icon-ke" style="color: gray"></span>
                      <span>{{ infor.can }}</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 商品视频 -->

          <div class="centerMovie">
            <router-link to="/Marketplace">
              <div class="movie-content">
                <div class="movie-top">
                  <img :src="infor.img" class="movie" />
                </div>
                <div class="movie-center">
                  <p>第一行 的板卡开发，俺看斯诺克</p>
                  <ul>
                    <li style="display: flex">
                      <span class="span">
                        <van-image
                          round
                          width="0.2rem"
                          height="0.2rem"
                          src="https://img.yzcdn.cn/vant/cat.jpeg"
                        />
                      </span>
                      <span style="color: gray">小...</span>
                    </li>
                    <div class="movie-eye">
                      <li>
                        <div class="eye">
                          <span class="iconfont icon-liulan" style="color: gray"></span>
                          <span>535</span>
                        </div>
                      </li>
                      <li>
                        <div>
                          <div>
                            <span class="iconfont icon-ke" style="color: gray"></span>
                            <span>535</span>
                          </div>
                        </div>
                      </li>
                    </div>
                  </ul>
                </div>
              </div>
            </router-link>
          </div>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
export default {
  name: "FindCenter",
  data() {
    return {
      count: 0,
      isLoading: false,
      information: [
        {
          img: require("assets/img/11.jpg"),
          title: "甜甜酷酷|清新雾霾蓝女孩穿搭推荐",
          detail1: "这是什么神仙颜色 好爱这一抹蓝",
          detail2: "雾霾蓝卫衣 穿上瞬间奶气满满...",
          headerpic: "../static/2.jpg",
          userdetail: "小...",
          lookNum: "1.2k",
          can: "63"
        },
        {
          img: require("assets/img/11.jpg"),
          title: "甜甜酷酷|清新雾霾蓝女孩穿搭推荐",
          detail1: "这是什么神仙颜色 好爱这一抹蓝",
          detail2: "雾霾蓝卫衣 穿上瞬间奶气满满...",
          headerpic: "../static/3.jpg",
          userdetail: "小...",
          lookNum: "1.2k",
          can: "63"
        },
        {
          img: require("assets/img/11.jpg"),
          title: "甜甜酷酷|清新雾霾蓝女孩穿搭推荐",
          detail1: "这是什么神仙颜色 好爱这一抹蓝",
          detail2: "雾霾蓝卫衣 穿上瞬间奶气满满...",
          headerpic: "../static/4.jpg",
          userdetail: "小...",
          lookNum: "1.2k",
          can: "63"
        }
      ],
      movieRecommand: [
        {
          movie: require("assets/img/11.jpg"),
          movtitle: "甜甜酷酷|清新雾霾蓝女孩穿搭推荐",
          movheaderpic: "../static/5.jpg",
          movuserdetail: "YO!PICKS 穿搭街",
          movlookNum: "1.3k",
          movcan: "63"
        }
      ]
    };
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        // Toast('刷新成功');
        this.isLoading = false;
        this.count++;
      }, 1000);
    }
  }
};
</script>

<style scoped>
@import url(../../assets/fonts/iconfont);
/* 达人分享 */
.box {
  margin-bottom: 78px;
}
.box .centerCon {
  width: 355px;
  margin: 32px auto 10px;
  display: flex;
  flex-direction: column;
}
.box .content {
  display: flex;
  border-bottom: 1px solid #cccccc;
  align-items: center;
  margin-top: 30px;
}
.box .pic {
  width: 150px;
  height: 150px;
}
.box .content .left {
  height: 150px;
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.box .content .right {
  padding: 10px;
  height: 150px;
  font-size: 14px;
}
.box .content .right .font,
.font1 {
  font-size: 10px;
  color: #cccccc;
}
.box .content .right .font1 {
  margin-top: 5px;
}
.box .content .right ul {
  display: flex;
}
.box .content .right li {
  margin-top: 10px;
  height: 32px;
  line-height: 32px;
  margin-right: 12px;
}
.box .content .right li .span {
  display: block;
  margin-top: 5px;
}
.box .content .right li span {
  font-size: 12px;
}
.box .content .right .eye {
  font-size: 10px;
  margin-left: 10px;
  font-size: 5px;
  margin-right: 10px;
}
.box .movie-content {
  display: flex;
  flex-direction: column;
}

/* 视频分享 */
.box .centerMovie {
  padding: 20px;
  color: gray;
  border-bottom: 1px solid #ccc;
}
.box .centerMovie a {
  list-style: none;
}
.box .movie {
  width: 100%;
  height: 150px;
}
.box .movie-content .movie-center {
  font-size: 14px;
}
.box .movie-content ul {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.box .movie-content .movie-eye {
  display: flex;
  justify-content: space-between;
}
.box .movie-content .movie-eye .eye {
  margin-right: 10px;
}
</style>